<template>
    <div class="detail">
        <div class="header">
            <span @click="goback">&#xe63f;</span><span>{{product.name}}</span><span>&#xe6e6;</span>
        </div>
        <div class="detailc">
            <p>轮播图</p>
            <p>{{product.name}}</p>
            <p>{{product.price}}</p>
            <p>卖家说</p>
            <p>商品详情</p>
        </div>
        <div class="dbutton">
            <p>
                <span>&#xe64c;</span><br/>
                <span>联系卖家</span>
            </p>
            <p>
                <span>&#xe601;</span><br/>
                <span>收藏</span>
            </p>
            <input type="button" name="" id="" value="去购物车" class="bt1" @click="gocart">
            <input type="button" name="" id="" value="立即购买" class="bt2" @click.stop="addToCart(product)">

        </div>
        <!-- {{product}} -->
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'detail',
  data () {
    return {
      //  product:''
    }
  },
  methods: {
    ...mapMutations(['addToCart']),
    goback () {
    //   console.log(this)
      history.back()
    },
    gocart () {
      this.$router.history.push('/cart')
    }
  },
  computed: {
    product () {
      return this.$route.query
    }
  }
}
</script>

<style lang='scss'>
@font-face {
  font-family: 'iconfont';  /* project id 931790 */
  src: url('//at.alicdn.com/t/font_931790_o30xzj90y3.eot');
  src: url('//at.alicdn.com/t/font_931790_o30xzj90y3.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_931790_o30xzj90y3.woff') format('woff'),
  url('//at.alicdn.com/t/font_931790_o30xzj90y3.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_931790_o30xzj90y3.svg#iconfont') format('svg');
}
.detail{
    display: flex;
    padding-top: 52px;
}
.header{
    height: 52px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    span:nth-child(1){
        font-family: iconfont;
        margin-left: 20px;
        margin-top: 20px;
        display: inline-block;
    }
    span:nth-child(2){
        // font-family: iconfont;
        margin-left: 116px;
        margin-top: 20px;
        display: inline-block;
        font-size: 20px;
    }
    span:nth-child(3){
        font-family: iconfont;
        margin-left: 96px;
        margin-top: 20px;
        display: inline-block;
        font-size: 20px;
    }
}
.detailc{
    flex: 1;
    p:nth-child(1){
        height: 300px;
        width: 100%;
        background: #F4511E;
    }
    p:nth-child(2){
        height: 50px;
        line-height: 50px;
        width: 100%;
        font-size: 20px;
        font-weight: bold;
        // background: #F4511E;
    }
    p:nth-child(3){
        height: 50px;
        line-height: 50px;
        width: 100%;
        font-size: 20px;
        color: #F4511E;
        // background: #F4511E;
    }

}
.dbutton{
    position: fixed;
    left: 0;
    bottom: 0;
    p{
        // line-height: 52px;
        text-align: center;
        height: 52px;
        width: 70px;
        float: left;
        &:nth-child(1){
            color: #F4511E;
            span:nth-child(1){
                font-family: iconfont;

            }
        }
        &:nth-child(2){
            // color: #F4511E;
            span:nth-child(1){
                font-family: iconfont;

            }
        }
    }
    .bt1{
        height: 52px;
        width: 115px;
        line-height: 52px;
        text-align: center;
        border: none;
    }
    .bt2{
        border: none;
        height: 52px;
        width: 115px;
        line-height: 52px;
        text-align: center;
        color: white;
        background: #F4511E;
    }

}

</style>
